* {
   box-sizing: border-box;
   padding: 0;
}
body {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 9px 1fr;
   height: 98vh;
   font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
      "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

h1 {
   display: block;
   font-size: 2.5em;
   margin-block-start: 0.67em;
   margin-block-end: 0.67em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   font-weight: bold;
   color: black;
}

.nav {
   grid-column: 1/2;
   grid-row: 1/2;
   display: grid;
   grid-template-columns: 258px 1fr;
   grid-template-rows: 98px;
   /* background-color: rgba(49, 48, 48, 0.637);
   backdrop-filter: blur(1px); */
   height: 70px;
}
.the-header {
   /* background-color: rgba(31, 137, 230, 0.299) !important; */
   height: 70px;
   background-color: rgba(49, 48, 48, 0.637) !important;
   backdrop-filter: blur(1px) !important;
}

.logo {
   grid-column: 1/2;
   grid-row: 1/2;
   display: flex !important;
   justify-content: center;
   align-items: center;
}

.login {
   grid-column: 1/2;
   grid-row: 1/2;
   display: flex;
   justify-content: center;
   align-items: center;
   color: rgb(10, 10, 10);
}

.inputForm {
   grid-column: 1/2;
   grid-row: 2/3;
   display: grid;
   align-items: center;
   justify-content: center;
}

.userForm,
.passForm {
   border-bottom: 1px solid rgb(72, 71, 71);
   background-color: transparent;
   padding-bottom: 3px;
}

.login-input {
   background-color: transparent;
   border: none;
   outline: none;
   font-size: 15px;
   transition: all 0.3s ease;
   margin-left: 5px;
   letter-spacing: 2px;
}

.login-input::placeholder {
   color: rgb(0, 0, 0);
   font-size: 16px;
}

.logo img {
   width: 60px;
   height: 60px;
   border-radius: 100%;
}

.navlist {
   grid-column: 2/3;
   grid-row: 1/2;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.myList {
   display: flex;

   justify-content: flex-end;
   margin-right: 100px;
}

.list li {
   display: inline-flex;
   margin-right: 40px;
   list-style: none;
}

.list li a {
   font-size: 18px;
   color: whitesmoke;
   text-decoration: none;
}

.active-now {
   padding: 10px 15px;
   border-radius: 20px;
   color: whitesmoke;
   background-color: rgb(21, 21, 21);
}

content {
   display: grid !important;
   grid-column: 1/2;
   grid-row: 2/3;
   display: flex;
   align-items: center;
   justify-content: center;
}

.loginForm {
   display: grid;
   grid-column: 1/2;
   grid-template-rows: 100px 200px 20px;
   border-radius: 20px;
   border: 2px solid rgb(49, 49, 49);
   width: 500px;
   height: 500px;
   background-color: rgba(251, 247, 247, 0.388);
   backdrop-filter: blur(5px);
   box-shadow: 2px 5px 15px black;
   color: black !important;
   /* align-content: center; */
}

.login {
   grid-column: 1/2;
   grid-row: 1/2;
   display: grid;
   justify-content: center;
   align-items: center;
   color: rgb(10, 10, 10);
}
.inputForm {
   display: grid;
   grid-template-columns: 80%;
   grid-column: 1/2;
   grid-row: 2/5;
   align-items: center;
   justify-content: center;
}
.inputLoginForm {
   display: grid;
   grid-template-columns: 80%;
   grid-column: 1/2;
   grid-row: 2/4;
   align-items: center;
   justify-content: center;
}
.userForm {
   border-bottom: 1px solid rgb(72, 71, 71);
   background-color: transparent;
   padding-bottom: 3px;
}
.login-input {
   background-color: transparent;
   border: none;
   outline: none;
   font-size: 15px;
   transition: all 0.3s ease;
   margin-left: 5px;
   letter-spacing: 2px;
}
.login-input::placeholder {
   color: black;
   font-size: 16px;
}

#forgotText {
   color: rgb(0, 0, 0);
   font-size: 15px;
   margin-top: -40px;
}

#forgotText:hover,
#signUp:hover {
   color: blue;
}

.loginBtn {
   /* background-color: rgb(19, 19, 19); */
   /* color: whitesmoke; */
   font-size: 16px !important;
   /* height: 35px; */
   /* border: none; */
   outline: none;
   border-radius: 10px !important;
   cursor: pointer;
   /* margin: 10px; */
   margin-top: -20px !important;
}
.signupBtn {
   /* background-color: rgb(19, 19, 19); */
   /* color: whitesmoke; */
   font-size: 16px !important;
   /* height: 35px; */
   /* border: none; */
   outline: none;
   border-radius: 10px !important;
   cursor: pointer;
   /* margin: 10px; */
   margin-top: -0px !important;
}

.loginBtn:active {
   background-color: rgb(48, 47, 47);
}
.login-footer {
   grid-column: 1/2;
   grid-row: 5/6;
   display: flex;
   align-items: center;
   justify-content: center;
}
#signUp {
   color: rgb(255, 255, 255);
}

/* =========================The new styles are below this========================== */